<template>
  <div class="conditions-item">
      <!-- 当前项 -->
      <div class="current-condition-item" :style="{backgroundColor: getBgColor}">
        <div class="condition-item-inputs">
          <el-select size="small" class="condition-item-ope" v-model="operator" @change="emitOperatorChange" placeholder="关系">
            <el-option v-for="(ope, index) in operators" :key="index" :label="ope.label" :value="ope.value" />
          </el-select>
          <el-cascader 
            class="condition-item-tol" 
            v-model="computedValue"
            size="small" 
            :options="steps"
            :props="{
              value: 'id',
              label: 'name',
              children: 'children',
              // checkStrictly: true
            }" 
            @change="emitConditionItemChange"
          />
        </div>
        <div class="condition-item-actions">
          <el-tooltip content="添加嵌套关系" placement="top" :show-after="500">
            <i class="iconfont condition-item-action-icon icon-ZH-KTHD-tianjia-" @click="addConditionChild"></i>
          </el-tooltip>
          <el-tooltip content="删除" placement="top" :show-after="500">
            <i class="iconfont condition-item-action-icon icon-del icon-guanbi4" @click="emitDel"></i>
          </el-tooltip>
        </div>
      </div>
      <!-- 子项部分 -->
      <transition name="upload" mode="out-in">
      <div class="condition-item-children" v-if="conditionItem.condition.length > 0">
        <div class="left">
          <div class="relations edge-relations">
            <el-radio class="relation-item" @change="emitRelationChange" v-for="(item, index) in relations" :key="index" :label="item.label" :value="item.value" v-model="relation" />
          </div>
        </div>
        <div class="right">
          <transition-group name="list">
            <Relation 
              v-for="(item, index) in conditionItem.condition" 
              :key="item.key" 
              :condition-item="item"
              :nodes="nodes" 
              :opacity="opacity > 1 ? (opacity - 1) : 1"
              @change-condition-item="changeConditionItem(item, $event)"
              @operator-change="changeConditionItemOper(item, $event)"
              @change-condition-item-relation="changeConditionItemRelation(item, $event)"
              @del-condition-item="delConditionItem(index)"
            />
          </transition-group> 
        </div>
      </div>
      </transition>
  </div>
</template>
<script setup>
import Relation from '@/components/Relation.vue';
import { ref, reactive, computed, onMounted } from 'vue';
import { api } from '@/utils/status';
import { deepCopy } from '@/utils/utils.js';
import { ElMessage } from 'element-plus';

const defaultCondition = {
  key: null,
  relation: null,
  // 描述选项的关系
  operator: null,
  // 选择的步骤id
  propId: null,
  // 指定绑定的步骤选项的key(默认id)
  prop: 'id',
  // 指定绑定的步骤选项的value(默认id)
  value: null,
  condition: []
}

const props = defineProps({
  // 当前条件对象
  conditionItem: {
    required: true,
    type: Object,
    default: {
      relation: null,
      // 描述选项的关系
      operator: null,
      // 选择的步骤id
      propId: null,
      // 指定绑定的步骤选项的key(默认id)
      prop: 'id',
      // 指定绑定的步骤选项的value(默认id)
      value: null,
      condition: []
    }
  },
  // 最外层的步骤数组
  nodes: {
    required: true,
    type: Array,
    default: []
  },
  // 当前选项的透明度
  opacity: {
    type: Number,
    default: 8
  }
});
const emits = defineEmits([
  // condtionItem的operator改变事件
  'operatorChange',
  // conditionItem的组合改变事件
  'changeConditionItem',
  // conditionItem的relation改变事件
  'changeConditionItemRelation',
  // 点击删除按钮
  'delConditionItem'
]);

// ============> datas
const operators = api.strategy.operators;
const relations = api.strategy.relations;
// 关系绑定值
const operator = ref(null);
// 联级选择绑定数组
const computedValue = ref([]);
// 当前关系relation绑定值
const relation = ref(null);
// 获取当前项背景色
const getBgColor = computed(() => {
  let currentItemBgColor = '';
  if (props.opacity === 10){
    currentItemBgColor = 'var(--color-main)';
  } else {
    currentItemBgColor = `var(--color-main-${props.opacity})`;
  }
  return currentItemBgColor;
});
// 重组步骤和选项数组
const steps = computed(() => {
  return props.nodes.map(item => {
    let result = {
      id: item.id,
      name: item.data.name,
      children: []
    };
    item.data.algoExecStrategyOpts.forEach(opt => {
      result.children.push({ id: opt.id, name: opt.optName, children: []});
    })
    return result;
  });
})
// ============> methods
// 发射改变当前项operator事件
function emitOperatorChange(e){
  if (e){
    emits('operatorChange', e);
  }
}
// 发射改变当前项组合值事件
function emitConditionItemChange(e){
  if (Array.isArray(e) && e.length > 1){
    emits('changeConditionItem', {
      propId: e[0],
      value: e[1]
    })
  } else {
    ElMessage.warning('请选择步骤中的选项');
    computedValue.value = [];
  }
}
// 发射改变当前项relation事件
function emitRelationChange(e){
  emits('changeConditionItemRelation', e)
}
// 发射删除该当前项事件
function emitDel(){
  emits('delConditionItem');
}
// 为当前项添加子condition项
function addConditionChild(){
  let conditionChild = deepCopy(defaultCondition);
  conditionChild.key = parseInt(Math.random() * 1000).toFixed(0);
  props.conditionItem.condition.push(reactive(conditionChild));
}

// ============>
function changeConditionItem(item, event){
  item.propId = event.propId;
  item.value = event.value;
}
function changeConditionItemOper(item, value){
  item.operator = value;
}
function changeConditionItemRelation(item, value){
  item.relation = value;
}
function delConditionItem(index){
  props.conditionItem.condition.splice(index, 1);
}

onMounted(() => {
  if (props.conditionItem.relation){
    relation.value = props.conditionItem.relation;
  }
  if (props.conditionItem.operator){
    operator.value = props.conditionItem.operator;
  }
  if (props.conditionItem.propId && props.conditionItem.value){
    computedValue.value = [props.conditionItem.propId, props.conditionItem.value];
  }
});
</script>
<style lang='scss' scoped>
@import '@/assets/styles/mixin.scss';
.conditions-item {
  // width: 98%;
  width: 100%;
  margin: 5px 0;
}
.current-condition-item {
  width: 100%;
  height: 36px;
  border: 2px solid var(--color-main);
  border-radius: 8px;

  // display: flex;
  // align-items: center;
  @include flex-between-center;
  .condition-item-inputs {
    margin-left: 5px;
    display: flex;
  }
  .condition-item-actions {
    display: flex;
  }
  .condition-item-actions .condition-item-action-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    background-color: var(--color-white-8);
    color: var(--color-main);
    cursor: pointer;
    margin: 0 5px;
    border-radius: 50%;
    transition: all 0.25s ease;
    &:hover {
      font-weight: bolder;
    }
    &.icon-del {
      color: var(--color-red);
    }
  }
}
.condition-item-ope {
  width: 70px;
  margin-right: 5px;
}
.condition-item-tol {
  margin-left: 5px;
}
.condition-item-children {
  width: 100%;
  display: flex;
  align-items: center;
  .left {
    margin: 5px 0;
    width: 60px;
    position: relative;
    .relations {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: var(--color-white-10);
      border: 2px solid var(--color-main);
      border-radius: 10px;
      overflow: hidden;
      width: 50px;
      .relation-item {
        margin: 0;
        height: 30px;
        width: 50%;
        &::v-deep .el-radio__input {
          display: none;
        }
        &::v-deep .el-radio__label {
          display: inline-block;
          width: 100%;
          padding: 0;
          height: 30px;
          line-height: 30px;
          padding: 0 5px;
          color: var(--color-main);
          border: 1px solid var(--color-main-4);
          transition: all 0.25s linear;
        }
      }
      .relation-item.is-checked {
        &::v-deep .el-radio__label {
          color: var(--color-white-10);
          background-color: var(--color-main);
        }
      }
    }
  }
  .right {
    width: calc(100% - 60px);
  }
}
</style>